<template>
	<view>
		<view style="width: 100vw;height: 735rpx; position:absolute;top: -200rpx;left: 0;">
			<!-- 覆盖整个视图区域 -->
			<image :src="require('../images/searchBg.jpg')" style="width: 100%;height: 100%"></image>
		</view>
		<view class="paddingL20" style="position:relative;z-index: 1;height: calc(100vh - 82rpx);">
			<!-- 使用 uv-steps 组件显示当前步骤的进度。uv-steps-item 组件通过 v-for 指令循环渲染步骤列表 list1 中的每个项目。 -->
			<view class="bg_white paddingL15 taxContent" style="">
				<view style="text-align: center;margin-bottom: 20rpx;font-size: 32rpx;font-weight: 600">税务授权登录</view>
				<view>
					<uv-steps :current="active">
						<uv-steps-item v-for="(item, index) in list1" :key="index" :title="item.title"></uv-steps-item>
					</uv-steps>
					<!--<uni-steps :options="list1" active-icon="checkbox" :active="active" />-->
				</view>
			</view>
			<!-- 应用了三个 CSS 类 class= -->
			<view class="bg_white paddingL15 formStyle" style="">
				<!-- 表单部分使用了 uni-forms 组件，并通过 ref 属性引用为 companyRef，以便在 JavaScript 代码中访问和操作表单。表单模型绑定到 companyForm 对象，并且验证规则绑定到 companyRules 对象。 -->
				<uni-forms :modelValue="companyForm" ref="companyRef" :rules="companyRules">
					<!-- 表单包含多个输入字段，如纳税人识别号、企业名称、电子税务局账号和登录密码等。每个输入字段都使用 uni-forms-item 和 uni-easyinput 组件进行封装，并通过 v-model 指令绑定到 companyForm 对象中的相应属性。 -->
					<view style="margin-bottom: 15rpx">纳税人识别号:</view>
					<uni-forms-item label="">
						<!-- disabled 这个属性使输入框处于禁用状态，用户无法在输入框中输入或修改内容。禁用状态通常用于显示只读信息或在某些条件下不允许用户编辑的场景。
						:inputBorder="false" 通过绑定 inputBorder 属性并设置为 false，可以去除输入框的边框。这使得输入框看起来更加简洁，通常用于在特定设计需求下隐藏边框。 -->
						<uni-easyinput v-model="companyForm.texNumber" disabled :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<view style="margin-bottom: 15rpx">企业名称:</view>
					<uni-forms-item label="">
						<uni-easyinput v-model="companyForm.companyName" disabled :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<!-- 如果 provinceName 变量为空或未定义，则显示一个提示文本 "所属省份:"。 -->
					<view v-if="!provinceName" style="margin-bottom: 15rpx">所属省份:</view>
					<!-- <uni-forms-item> 组件，它同样在 provinceName 变量为空或未定义时显示。这个组件用于表单项的封装，并且包含了一些属性：
            label=""：表示表单项的标签为空。
            ref="province"：为这个表单项设置一个引用名称 province，以便在代码中可以通过 this.$refs.province 访问它。
            required：表示这个表单项是必填的。
            name="province"：设置表单项的名称为 province。 -->
					<uni-forms-item v-if="!provinceName" label="" ref="province" required name="province">
						<!-- <picker> 组件通常用于在移动端应用中创建一个下拉选择器，允许用户从一个预定义的选项列表中进行选择 
				@change="provinceChange"：当用户在选择器中选择一个选项时，会触发 change 事件，并调用 provinceChange 方法。这个方法通常用于处理用户选择后的逻辑，例如更新表单数据或触发其他相关操作。
				:value="provinceIndex"：绑定了当前选择的索引值 provinceIndex。这个索引值对应于 provinceList 中的某个选项，用于指示当前选中的省份。
:range="provinceList"：绑定了可供选择的省份列表
				-->
						<picker @change="provinceChange" :value="provinceIndex" :range="provinceList">
							<!-- :style 绑定，设置文本颜色和字体大小。颜色根据 companyForm.province 是否有值来决定 
				<text> 元素用于显示当前选择的省份名称或提示文本。
				-->
							<text class="textStyle" :style="{
								color: companyForm.province ? '#000' : '#999',
								'font-size': companyForm.province ? '26rpx' : '24rpx'
							}" style="padding-right: 10px;margin-top: 20rpx;">{{ companyForm.province ? companyForm.province :
								'请选择企业所在省份' }}</text>
						</picker>
					</uni-forms-item>
					<view style="margin-bottom: 15rpx">电子税务局账号:</view>
					<!-- label=""：表示表单项的标签为空。
					ref="taxAccount"：为这个表单项设置一个引用名称 taxAccount，以便在代码中可以通过 this.$refs.taxAccount 访问它。
					name="taxAccount"：设置表单项的名称为 taxAccount。 -->
					<uni-forms-item label="" ref="taxAccount" name="taxAccount">
						<!-- :trim="true"：表示输入框的值会自动去除首尾空格 
						v-model="companyForm.taxAccount"：通过 v-model 指令，将输入框的值双向绑定到 companyForm 对象
						placeholder="请输入手机号"：设置输入框的占位符文本，当输入框为空时显示 "请输入手机号"。
						maxlength="11"：限制输入框的最大字符数为 11
						@input="changeValidate($event,'taxAccount')"：绑定 input 事件，当用户在输入框中输入内容时，会调用 changeValidate 方法，并传递事件对象和表单项名称 taxAccount 作为参数。这个方法通常用于验证输入内容
						:clearable="false"：表示输入框不可清除，即不显示清除按钮。
						-->
						<uni-easyinput :trim="true" v-model="companyForm.taxAccount" placeholder="请输入手机号" maxlength="11"
							@input="changeValidate($event, 'taxAccount')" :clearable="false"></uni-easyinput>
					</uni-forms-item>
					<view style="margin-bottom: 15rpx">登录密码:</view>
					<uni-forms-item label="" ref="taxPassword" name="taxPassword">
						<!-- type="password"：将输入框的类型设置为密码，这样输入的内容会以掩码形式显示，确保密码的隐私性。 -->
						<uni-easyinput :trim="true" type="password" v-model="companyForm.taxPassword"
							placeholder="请输入税务密码" @input="changeValidate($event, 'taxPassword')"
							:clearable="false"></uni-easyinput>
					</uni-forms-item>
					<!-- 如果 codeShow 属性为 true，则会显示一个额外的输入字段，用于输入手机验证码。验证码输入字段还包含一个按钮，用于获取验证码，并显示倒计时。 -->
					<view v-if="codeShow">
						<view style="margin-bottom: 15rpx">手机验证码:</view>
						<uni-forms-item label="" ref="phoneCode" name="phoneCode">
							<uni-easyinput :trim="true" v-model="companyForm.phoneCode" placeholder="请输入手机验证码"
								@input="changeValidate($event, 'phoneCode')" :clearable="false">
								<!-- 使用插槽在输入框的右侧添加自定义内容。 -->
								<template slot="right">
									<!-- 根据 btnDisabled 的值动态设置样式类，并绑定点击事件 getCode。 -->
									<view :class="!btnDisabled ? 'codeStyle' : 'codeDisabledStyle'" @click="getCode">
										<!-- {{code_QY}}：这个部分显示了一个名为 code_QY 的变量的值。code_QY 可能是一个字符串，表示获取验证码按钮的文本，例如“获取验证码”。 
										btnDisabled 的值来决定是否显示倒计时-->
										{{ code_QY }}{{ btnDisabled ? "(" + countDown + ")" : "" }}
									</view>
								</template>
							</uni-easyinput>
						</uni-forms-item>
					</view>
				</uni-forms>
				<!-- type="primary"：设置按钮的类型为 primary 
				:loading="btnLoading"：使用 Vue 的绑定语法 :，将按钮的 loading 属性绑定到 btnLoading 变量。当 btnLoading 为 true 时，按钮会显示加载状态，通常会显示一个加载动画或禁用按钮以防止重复点击。-->
				<button @click="loginBtnFun" class="loginStyle" type="primary" :loading="btnLoading">授权登录</button>
				<!--<view class="loginStyle" style="">授权登录</view>-->
				<view class="row" style="justify-content: center;margin-top: 20rpx">
					<checkbox-group @change="isChecked = !isChecked" style="width: auto">
						<!-- style="transform:scale(0.7);"：缩放复选框的大小，使其变小。
						:checked="isChecked"：绑定复选框的选中状态到 isChecked 变量。shape="circle"：设置复选框的形状为圆形。 -->
						<checkbox color="#f2891c" style="transform:scale(0.7);" :checked="isChecked" shape="circle">
						</checkbox>
					</checkbox-group>
					<view>阅读并同意 <text style="color: #0A98D5;" @click="toAgreement">《税务授权协议》</text></view>
				</view>
			</view>
		</view>
		<view>
			<!-- uni-popup 组件，用于创建弹出窗口。:maskClick="false"：设置为 false，表示点击遮罩层不会关闭弹出窗口。background-color="#fff"：设置弹出窗口的背景颜色为白色-->
			<uni-popup ref="popup" :maskClick="false" background-color="#fff">
				<view class="popup-content"> <!-- 这是弹出窗口的内容区域，使用 popup-content 类进行样式定义。 -->
					<view style="margin-bottom: 20rpx">温馨提示</view> <!-- 设置底部外边距。 -->
					<!-- 执行视图显示的判断逻辑 -->
					<view v-if="isloading"> <!-- 当 isloading 为 true 时，显示当前视图 -->
						<view style="margin: 60rpx 0">
							<uni-load-more status="loading" :iconSize="70" :showText="false" />
						</view>
						<view style="color: #488AFD;margin-top: 90rpx">授权中，请耐心等待...</view>
					</view>
					<view v-else>
						<view style="width: 125rpx;height: 110rpx;margin: 0 auto">
							<image :src="require('../images/successIcon.png')" style="width: 100%;height: 100%"></image>
						</view>
						<view style="font-size: 32rpx;color: #222222;margin-top: 20rpx">授权成功</view>
						<view style="color: #999999;font-size: 26rpx;margin-top: 20rpx">请勿在5分钟内登录税局系统！</view>
						<view class="dialogBtn" @click="givePowerFun" style="">点击完成授权（{{ time }}）</view>
						<!-- 显示完成授权按钮，绑定点击事件 givePowerFun，按钮文本包含倒计时 {{ time }}。 -->
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import {
	firstLoginApi,
	needCodeApi,
	onlyAccountApi,
	sendCodeApi
} from "@/api/water";
import { getProvince } from "@/api/public";
import Routine from '@/libs/routine'
import share from "@/utils/share";
import cache from "@/utils/cache";
import { deleteSpuid } from '@/utils/auth'
export default {
	data() {
		return {
			time: 3,
			timer: null,
			codeShow: false,
			disabled: false,
			isloading: true,
			btnLoading: false,
			notNeedCode: ["zhejiang", "hubei", "guangdong"],
			provinceIndex: 0,
			provinceList: [],
			provinceListObj: [],
			active: 1,
			list1: [{
				title: '公司信息'
			}, {
				title: '税务信息'
			}, {
				title: '获取数据'
			}],
			texNumber: '',
			isChecked: false,
			companyRules: { // 表单验证规则
				taxAccount: {
					rules: [{
						required: true,
						errorMessage: '请输入手机号'
					},
					{   // 通过 validateFunction 属性，可以自定义验证函数。这个函数接收四个参数：rule、value、data 和 callback。函数内部使用了 Promise 来处理异步验证逻辑。
						validateFunction: (rule, value, data, callback) => {
							return new Promise((resolve, reject) => {
								if (!value) {
									reject(new Error("手机号不能为空"))
									// return callback(new Error("手机号不能为空"));
								} else {
									const reg = /^1[3-9][0-9]\d{8}$/;
									// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
									if (reg.test(value)) {
										resolve();
										// callback()
									} else {
										// 具体错误信息没有提示
										reject(new Error("请输入正确的手机号"))
										// return callback(new Error("请输入正确的手机号"));
									}
								}
							}).then(result => {
							}).catch(error => {
							});
						},
						errorMessage: '手机号码不正确',
					}
					]
				},
				taxPassword: {
					rules: [{
						required: true,
						errorMessage: '请输入税务密码'
					}]
				},
				// phoneCode: { rules: [{required: true, errorMessage: '请输入手机验证码' }] },
			},
			countDown: 60,
			btnDisabled: false,
			clickCode: false,
			code_QY: "获取验证码",
			provinceName: '',
			provinceId: '',
			uuid: '',
			enterpriseId: '',
			taskId: '',
			companyForm: {
				texNumber: '',
				companyName: '',
				taxAccount: '',
				taxPassword: '',
				phoneCode: '',
			},
		}
	},
	// Vue 组件的生命周期方法。当页面加载时，该方法会被调用，并接收一个 options 对象作为参数。这个 options 对象通常包含通过页面跳转传递过来的参数。
	onLoad(options) {
		this.companyForm.texNumber = options?.tax
		this.companyForm.companyName = options?.companyName
		this.provinceName = options?.provinceName
		this.provinceId = options?.provinceId
		this.getProvinceList()
		share.getShareConfig({}, this.$WXMENU);
	},
	// Vue 组件的生命周期方法。当组件的模板已经被渲染到页面上时，该方法会被调用。
	onReady() {
		this.$nextTick(() => { // this.$nextTick 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束后执行回调函数。它确保在回调函数执行时，DOM 已经更新完成。
			this.$refs.companyRef.setRules(this.companyRules) // 通过 ref 属性引用了模板中的 <uni-forms> 组件实例。ref 属性允许我们直接访问子组件或 DOM 元素。这里调用了 setRules 方法，将 companyRules 对象传递给表单组件，设置了表单的验证规则。
		})
	},
	methods: {
		// 处理登录按钮点击事件
		loginBtnFun() {
			if (!this.isChecked) {
				return this.$util.Tips('请先同意税务授权协议')
			}
			if (this.disabled) return
			// 在2秒后将this.disabled设置为false，并清除定时器。这样可以避免用户重复点击按钮。
			// 返回值是唯一的定时器 ID。这个 ID 可以用于通过 clearTimeout 函数来清除定时器
			let timer = setTimeout(() => {
				this.disabled = false
				clearTimeout(timer)
			}, 2000)
			// 进行表单验证。validate 方法返回一个 Promise 对象，使用 then 方法处理验证结果。
			// this.$refs.companyRef 通过 ref 属性引用了模板中的 <uni-forms> 组件实例。ref 属性允许我们直接访问子组件或 DOM 元素。
			// this.$refs.companyRef.validate() 调用了 <uni-forms> 组件实例的 validate 方法。这个方法用于对表单中的所有字段进行验证。它返回一个 Promise 对象，表示验证过程的完成状态。
			// .then(async (validate) 表示在验证完成后，处理返回的 Promise 对象。validate 是一个布尔值，表示表单验证是否通过。async 关键字表明接下来的函数是一个异步函数，可以使用 await 关键字来等待异步操作的完成。
			this.$refs.companyRef.validate().then(async (validate) => {
				if (validate) { // 如果验证通过，函数会进一步检查 codeShow 属性。如果 codeShow 为 true，则表示需要验证码：
					// this.active = 2
					if (this.codeShow) {
						if (!this.clickCode) {
							return this.$util.Tips('请先获取验证码')
						}
						if (this.companyForm.phoneCode.length < 6) {
							return this.$util.Tips('请输入6位验证码')
						}
						this.btnLoading = true // btnLoading 属性为 true，表示按钮处于加载状态
						await this.needCodeFun() // 调用 needCodeFun 方法，异步等待其执行完成
					} else {
						this.btnLoading = true
						if (this.notNeedCode.includes(this.provinceName)) {
							await this.noteNeedCodeLogin() // 不需要验证码登录
						} else {
							await this.firstLogin()
						}
					}
					this.disabled = true
					// setTimeout(() => {
					//   uni.navigateTo({ url: '/pagesWater/taxSearch/companyDetail' })
					// },2000)
				}
			})

			let params = {
				Um_Key_ButtonName: `授权登录-${this.companyForm.companyName}`,
				Um_Key_SourcePage: '税务授权登录',
			}
			this.$umaTrack.pageClickTrack(params)
		},
		givePowerFun() {
			clearInterval(this.timer);
			this.$refs.popup.close()
			// uni.navigateTo({ url: `/pagesWater/taxSearch/companyDetail?id=${this.enterpriseId}` })
			// 修改跳转到列表页面
			this.time = 3;
			uni.redirectTo({
				url: '/pagesWater/reportList/index'
			})
		},
		noteNeedCodeLogin() {
			// 从缓存中获取参数
			let par = cache.get('params') ? JSON.parse(cache.get('params')) : {}
			// 构建请求对象 obj，包含税务局账号、手机号、密码、省份名称、省份 ID、企业名称、分享用户 ID、来源、渠道类型等信息。
			let obj = {
				provinceName: this.provinceName,
				creditCode: this.companyForm.texNumber.trim(),
				phone: this.companyForm.taxAccount.trim(),
				password: this.companyForm.taxPassword.trim(),
				provinceId: this.provinceId,
				taxpayerName: this.companyForm.companyName,
				shareUid: par.spreadUid || 0,
				source: par.spreadUid ? 'share' : 'query',
				// #ifdef MP
				channelType: 'routine',
				// #endif
				// #ifdef H5
				channelType: Routine.isWeixin() ? 'wechat' : 'h5',
				// #endif

				// #ifdef MP-TOUTIAO
				channelType: 'tiktok'
				// #endif
			}

			// 不需要验证码登录
			// 调用 onlyAccountApi 方法，传递 obj 参数。这个方法返回一个 Promise 对象，使用 then 方法处理返回结果。
			onlyAccountApi(obj).then((notNeed) => {
				
				if (notNeed.code === 200) {
					deleteSpuid()
					// this.taskId = notNeed.data.id
					this.enterpriseId = notNeed.data.enterpriseId
					// this.matchFun()
					this.$refs.popup.open('center')
					setTimeout(() => {
						this.isloading = false
						if (!this.isloading) {
							this.timer = setInterval(() => {
								if (this.time > 0) {
									this.time--;
								} else {
									clearInterval(this.timer);
									this.$refs.popup.close()
									// uni.navigateTo({ url: `/pagesWater/taxSearch/companyDetail?id=${notNeed.data.enterpriseId}` })
									this.time = 3;
									uni.redirectTo({
										url: '/pagesWater/reportList/index'
									})
								}
							}, 1000);
						}
					}, 2000)
					
				}
			}).finally(() => {
				this.loading = false
				this.btnLoading = false
			})
		},
		async firstLogin() {
			let par = cache.get('params') ? JSON.parse(cache.get('params')) : {}

			let params = {
				creditCodeOrTaxPayerId: this.companyForm.texNumber,
				phoneNumber: this.companyForm.taxAccount.trim(),
				provinceName: this.provinceName,
				provinceId: this.provinceId,
				taxpayerName: this.companyForm.companyName.trim(),
				password: this.companyForm.taxPassword.trim(),
				shareUid: par.spreadUid || 0,
				source: par.spreadUid ? 'share' : 'query',
				// #ifdef MP
				channelType: 'routine',
				// #endif
				// #ifdef H5
				channelType: Routine.isWeixin() ? 'wechat' : 'h5',
				// #endif

				// #ifdef MP-TOUTIAO
				channelType: 'tiktok'
				// #endif
			}
			firstLoginApi(params).then(res => {
				if (res.code == 200) {
					deleteSpuid()
					if (res.data.code !== 0) {
						return this.$util.Tips(res.data.message)
					}
					this.uuid = res.data.uuid
					this.enterpriseId = res.data.enterpriseId; //企业id
					this.taskId = res.data.queryTaskId
					if (res.data.needSendCaptchaCode === 0) { //不需要验证码
						this.$refs.popup.open('center')
						setTimeout(() => {
							this.isloading = false
							if (!this.isloading) {
								this.timer = setInterval(() => {
									if (this.time > 0) {
										this.time--;
									} else {
										clearInterval(this.timer);
										this.$refs.popup.close()
										// uni.navigateTo({ url: `/pagesWater/taxSearch/companyDetail?id=${res.data.enterpriseId}` })
										this.time = 3;
										uni.redirectTo({
											url: '/pagesWater/reportList/index'
										})
									}
								}, 1000);
							}
						}, 2000)
					} else {
						console.log('需要验证码');						// 需要验证码
						this.codeShow = true
					}
				}
			}).finally(() => {
				this.btnLoading = false
			})
		},
		// 需要验证码
		async needCodeFun() {
			let params = {
				provinceName: this.provinceName,
				creditCodeOrTaxPayerId: this.companyForm.texNumber,
				phoneNumber: this.companyForm.taxAccount.trim(),
				password: this.companyForm.taxPassword.trim(),
				code: this.companyForm.phoneCode.trim(),
				enterpriseId: this.enterpriseId,
				uuid: this.uuid,
				source: 'share'
			}
			// 点击获取业务数据 按钮变为数据获取中
			needCodeApi(params).then(res => {
				if (res.code == 200) {
					
					this.$refs.popup.open('center')  // 调用 open('center') 方法在屏幕中央打开弹出窗口。
					// 2秒后关闭弹出窗口
					setTimeout(() => {
						this.isloading = false
						if (!this.isloading) {
							this.timer = setInterval(() => {
								if (this.time > 0) {
									this.time--;
								} else {
									clearInterval(this.timer);
									this.$refs.popup.close() // 调用 close 方法关闭弹出窗口。
									// uni.navigateTo({ url: `/pagesWater/taxSearch/companyDetail?id=${res.data.enterpriseId}` })
									this.time = 3;
									uni.redirectTo({ // 使用 uni.redirectTo 将用户重定向到报告列表页面。
										url: '/pagesWater/reportList/index'
									})
								}
							}, 1000);
						}
					}, 2000)
				}
			}).catch(err => {
				this.$util.Tips(err) // 错误提示信息，向用户反馈操作失败的原因。
				// #ifdef MP
				// setTimeout(() => {
				//   uni.redirectTo({ url: '/pageHome/company/companyInformation' })
				// },1000)
				// #endif
			}).finally(() => {
				// this.$refs.popup.close()
				this.btnLoading = false
			})
		},
		getCode() {
			if (this.btnDisabled) return
			this.$refs.companyRef.validate().then(async (validator) => {
				if (validator) {
					this.btnDisabled = true;
					let params = {
						phone: this.companyForm.taxAccount,
						creditCodeOrTaxPayerId: this.companyForm.texNumber,
						uuid: this.uuid
					}
					sendCodeApi(params).then(res => {
						this.clickCode = true
						this.$util.Tips(res.message)
					}).catch(err => {
						console.log(err)
						this.$util.Tips(err)
					}).finally(() => {
						let timer = setInterval(() => {
							if (this.countDown > 0) {
								this.countDown--;
							} else {
								clearInterval(timer);
								this.btnDisabled = false;
								this.countDown = 60;
								this.code_QY = "重新获取"
							}
						}, 1000);
					})
				}
			})
			let params = {
				Um_Key_ButtonName: `发送验证码-${this.companyForm.companyName}`,
				Um_Key_SourcePage: '税务授权登录',
			}
			this.$umaTrack.pageClickTrack(params)
		},
		async getProvinceList() {
			let res = await getProvince()
			if (res.code === 200) {
				this.provinceListObj = res.data
				this.provinceList = this.provinceListObj.map(v => v.name)
			}
		},
		provinceChange(val) {
			this.provinceIndex = val.detail.value
			this.$set(this.companyForm, 'province', this.provinceList[val.detail.value])
			this.provinceListObj.forEach(item => {
				if (this.companyForm.province == item.name) {
					this.provinceId = item.id
					this.provinceName = item.pinyin
				}
			})
		},
		changeValidate(e, ref) {
			this.$refs[ref].onFieldChange(e)
		},
		toAgreement() {
			uni.navigateTo({
				url: '/pages/privacy/authorizationAgreement'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/* #ifdef MP-TOUTIAO */
/deep/ .uv-steps-item__line--row {
	left: 120rpx !important;
}

/deep/ .uv-steps {
	justify-content: space-between;
}

/* #endif */
.taxContent {
	margin-top: 30rpx;
	padding-top: 30rpx;
	border-radius: 20rpx;
	padding-bottom: 20rpx;
	height: 244rpx;
}

/deep/.uni-forms-item__label {
	display: none !important;
}

.loginStyle {
	width: 100%;
	background: linear-gradient(90deg, #488AFD 0%, #3F9BF9 100%);
	text-align: center;
	color: white;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin-top: 25rpx;
	overflow: hidden;
}

/deep/ uni-checkbox .uni-checkbox-input {
	border-radius: 50%;
}

.formStyle {
	margin-top: 30rpx;
	border-radius: 20rpx;
	padding-top: 30rpx;
	padding-bottom: 50rpx;
}

.codeStyle {
	background: #488AFD;
	color: white;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	border-radius: 0 40rpx 40rpx 0;
}

.codeDisabledStyle {
	background: #CCCCCC;
	color: white;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx 0 30rpx;
	border-radius: 0 40rpx 40rpx 0;
}

.popup-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	//justify-content: center;
	padding: 25px 15px 15px;
	height: 540rpx;
	background-color: #fff;
	text-align: center;
	width: 520rpx;
	margin: 0 auto;
	position: relative;
	border-radius: 20rpx;
	z-index: 999;
}

/deep/ .uni-popup .uni-popup__wrapper {
	border-radius: 25rpx;
}

.dialogBtn {
	width: 408rpx;
	height: 72rpx;
	line-height: 72rpx;
	background: #488AFD;
	border-radius: 30rpx;
	color: white;
	margin-top: 40rpx;
}

/deep/ .uni-easyinput__content-input {
	height: 80rpx;
}

/deep/ .uni-easyinput__content {
	border-radius: 40rpx;
}

.textStyle {
	height: 88rpx;
	width: 100%;
	display: block;
	border: 1px solid rgb(229, 229, 229);
	border-radius: 40rpx;
	line-height: 88rpx;
	padding-left: 20rpx;
}
</style>